<template>
  <!-- 全部背景色开始 -->
  <div class="suoyou">
    <!-- 头部结束 -->
    <div class="header">
    <!-- 头部第一层开始 -->
    <div class="header-one">
      <!-- 头像+立即登录 开始 -->
      <div class="touxiangdenglu">
        <img class="touxiang" src="../../../public/static/image/my/touxiang01.png" />
        <span class="lijidenglu">立即登录</span>
      </div>
      <!-- 头像+立即登录 结束 -->

      <!-- 信息开始 -->
      <div class="xinxi">
        <img src="../../../public/static/image/my/touxiang01.png" />
      </div>
      <!-- 信息结束 -->
    </div>
    <!-- 头部第一层结束 -->

    <!-- 头部第二层开始 -->
    <div class="header-two">
      <div class="jinbiduihuan">
        <p>- -</p>
        <div>
          <img src="../../../public/static/image/my/jinbi.png" />
          <span>币兑换</span>
        </div>
      </div>
      <div>
        <p>- -</p>
        卡包
      </div>
      <div>
        <p>- -</p>
        神钱包
      </div>
      <div>
        <p>- -</p>
        勋章
      </div>
    </div>
    <!-- 头部第二层结束 -->
    </div>
    <!-- 头部结束 -->

    <!-- 身体开始 -->
    <div class="body">
      <!-- 身体第一层开始 -->
      <div class="bodyy">
        <p>常用功能</p>
        <div class="body-one">
          <van-grid :column-num="4" class="center-one">
            <van-grid-item icon="photo-o" text="我的订单" />
            <van-grid-item icon="photo-o" text="送餐地址" />
            <van-grid-item icon="photo-o" text="发票助手" />
            <van-grid-item icon="photo-o" text="敬请期待" />
          </van-grid>
        </div>
      </div>
      <!-- 身体第一层结束 -->

      <!-- 身体第二层开始 -->
      <div class="body-two">
        <p>互动福利</p>
        <!-- 头像+文本+按钮 -->
        <div class="touxiang-wenben-anniu">
          <div class="touxiang-wenben">
            <!-- 头像 -->
            <div class="touxiang">
              <img src="../../../public/static/image/my/jinbi.png" alt="" />
            </div>
            <!-- 文本 -->
            <div class="wenben">
              <p>这任务~Amazing！</p>
              <p>完成它，奖励就是你的</p>
              <p><img src="../../../public/static/image/my/jinbi.png" alt="" /></p>
            </div>
          </div>
          <!-- 去领取按钮 -->
          <div class="anniu">
            <button class="anniu-one">去领取</button>
          </div>
        </div>
        <!-- 头像+文本+按钮 第二个 -->
        <div class="touxiang-wenben-anniu">
          <div class="touxiang-wenben">
            <!-- 头像 -->
            <div class="touxiang">
              <img src="../../../public/static/image/my/jinbi.png" alt="" />
            </div>
            <!-- 文本 -->
            <div class="wenben">
              <p>这任务~Amazing！</p>
              <p>完成它，奖励就是你的</p>
              <p><img src="../../../public/static/image/my/jinbi.png" alt="" /></p>
            </div>
          </div>
          <!-- 去领取按钮 -->
          <div class="anniu">
            <button class="anniu-one">去领取</button>
          </div>
        </div>
      </div>
      <!-- 身体第二层结束 -->

      <!-- 身体第三层开始 -->
      <div class="bodyyy">
        <p>其他服务</p>
        <div class="body-three">
          <van-grid :column-num="4">
            <van-grid-item icon="photo-o" text="企业送" />
            <van-grid-item icon="photo-o" text="K公益" />
            <van-grid-item icon="photo-o" text="附近门店" />
            <van-grid-item icon="photo-o" text="设置" />
            <van-grid-item icon="photo-o" text="投诉建议" />
            <van-grid-item icon="photo-o" text="隐私政策" />
            <van-grid-item icon="photo-o" text="帮助" />
          </van-grid>
        </div>
      </div>
      <!-- 身体第三层结束 -->
    </div>
    <!-- 身体结束 -->

    <!-- 脚部开始 -->
    <div class="foot">
      <van-tabbar v-model="active" @change="onChange">
        <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
        <van-tabbar-item icon="search">标签2</van-tabbar-item>
        <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
        <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- 脚部结束 -->
  </div>
  <!-- 全部背景色结束 -->
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
// 全部背景色
.suoyou {
  background-color: rgb(245, 245, 245);
}
// 头部
.header{
  background-color: white;
}
// 头部第一层开始
.header-one {
  display: flex;
  justify-content: space-between;
}
//头像+立即登录
.touxiangdenglu {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-left: 20px;
}
.touxiang {
  padding-right: 10px;
  width: 45px;
}
.lijidenglu {
  font-weight: 800;
}
// 右上角信息
.xinxi {
  align-items: center;
  margin-top: 15px;
  margin-right: 15px;
  & > img {
    width: 30px;
  }
}
// 头部第一层结束

// 头部第二层开始
.header-two {
  display: flex;
  padding-top: 25px;
  padding-bottom: 15px;
  & > div {
    width: 25%;
    text-align: center;
    font-size: 15px;
    p {
      font-weight: 300;
      font-size: 20px;
    }
  }
}
.jinbiduihuan > div {
  display: flex;
  align-items: center;
  margin-left: 10px;
  & > img {
    width: 16px;
  }
}
// 头部第二层结束

// 身体第一层开始
.body{
  position: fixed;
  top: 150px;
  bottom: 60px;
  overflow-y: scroll;
  // height: 520px;
}
.bodyy {
  border-radius: 10px;
  width: 95%;
  background-color: white;
  margin-left: 2.5%;
  margin-top: 10px;
  box-shadow: 0px 2px 10px gray;
  & > p {
    padding-top: 10px;
    margin-left: 10px;
    // margin-bottom: 10px;
    font-size: 18px;
    font-weight: 900;
  }
}
.body-one {
  width: 90%;
  margin-left: 5%;
}
// 身体第一层结束
// 身体第二层开始
.body-two {
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 2px 10px gray;
  background-color: white;
  border-radius: 10px;
  width: 95%;
  margin-left: 2.5%;
  // 标题
  & > p {
    padding-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 900;
  }
}
// 头像+文本+按钮
.touxiang-wenben-anniu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // 头像+文本
  & > .touxiang-wenben {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-left: 10px;
  }
}
// 头像
.touxiang > img {
  width: 50px;
  margin-right: 10px;
}
// 文本
.wenben > p {
  line-height: 23px;
  & > img {
    width: 22px;
  }
}
// 文本的字重
.wenben > p:nth-child(1) {
  font-weight: 550;
}
.wenben > p:nth-child(2) {
  font-size: 10px;
  color: gray;
}
// 按钮
.anniu {
  margin-right: 10px;
  & > .anniu-one {
    background-color: rgb(214, 47, 54);
    color: white;
    border-radius: 10px;
    border: 0;
    width: 80px;
    height: 25px;
  }
}
// 身体第二层结束
// 身体第三层开始
.bodyyy {
  border-radius: 10px;
  width: 95%;
  background-color: white;
  margin-left: 2.5%;
  margin-top: 10px;
  box-shadow: 0px 2px 10px gray;
  & > p {
    padding-top: 10px;
    margin-left: 10px;
    // margin-bottom: 10px;
    font-size: 18px;
    font-weight: 900;
  }
}
// 身体第三层结束

// 脚部开始
.foot{
  margin-bottom: 10px;
}
// 脚部结束
</style>